<template>
  <div class="drawer_box">
    <div class="date_searchbox">
      <div>
        <el-date-picker
          style="width: 218px"
          v-model="value3"
          type="month"
          value-format="YYYY-MM"
          placeholder="选择月份"
          @change="chanse"
        />
      </div>
      <div class="month_box">
        <div
          @click="itemClick(index, item)"
          class="items flex_center_center"
          v-for="(item, index) in dateArr"
          :key="index"
          :class="{ isDate: item.is }"
        >
          {{ item.date }}
        </div>
      </div>
    </div>

    <div style="width: 90%" class="isTable">
      <el-table
        @cell-click="dialogTableClick"
        class="sjzx"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期" width="65px">
          <template v-slot="scope">
            <div>
              {{ scope.row.date }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item, index) in jqLists"
          :key="index"
          :label="getPropName(index)"
          :prop="getPropName(index)"
        >
          <template v-slot="scope">
            <div v-if="writecope(scope.row, getPropName(index)) != '--'">
              {{ "已上报" }}
            </div>

            <span v-else>
              {{ writecope(scope.row, getPropName(index)) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 整点状态弹窗 -->
    <div v-if="dialogVisible1" class="dialog_boxs isTable">
      <el-dialog
        top="60px"
        title="监区整点罪犯数据"
        width="1440"
        :show-close="false"
        v-model="dialogVisible1"
      >
        <div class="jrzb-table">
          <el-table
            :data="tableDatas"
            style="width: 100%"
            border
            class="sjzx"
            height="650"
          >
            <el-table-column prop="name" label="监区" width="90" align="center">
              <template #default="scope">
                <div>
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="在册" align="center">
              <template #default="scope">
                {{ scope.row.zcfr }}
              </template>
            </el-table-column>
            <el-table-column prop="zy" label="在押" align="center">
              <template #default="scope">
                {{ scope.row.zyfr }}
              </template>
            </el-table-column>
            <el-table-column prop="syfr" label="实押" align="center">
            </el-table-column>
            <el-table-column align="center" prop="jnzy" label="监内住院" />
            <el-table-column align="center" prop="ljtq" label="离监探亲" />
            <el-table-column align="center" prop="jbfr" label="禁闭" />
            <el-table-column align="center" prop="cjxd" label="惩戒训导" />
            <el-table-column align="center" prop="jwzy" label="监外住院" />
            <el-table-column align="center" prop="jwzx" label="监外执行" />
            <el-table-column align="center" prop="lnzt" label="历年在逃">
              {{ "--" }}
            </el-table-column>

          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Back,
  Right,
} from "@element-plus/icons-vue";

import http from "@/utils/api";
import jjbjlTwo from "../components/jjbjlTwo.vue";
import towZfxx from "../components/towZfxx.vue";
import zdzf from "../components/zdzf.vue";
import yxry from "../components/yxry.vue";
import router from "@/router";
import jgsb from "@/components/jgsb.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
} from "vue";
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  jqArr: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: "",
  },
});
let dateSfm = ref("");
let value3 = ref("");
let hour = ref("");
let daydata = ref("");
let datePicker = ref("");
let tableData = ref([
  {
    date: "07:00",
  },
  {
    date: "08:00",
  },
  {
    date: "09:00",
  },
  {
    date: "10:00",
  },
  {
    date: "11:00",
  },
  {
    date: "12:00",
  },
  {
    date: "13:00",
  },
  {
    date: "14:00",
  },
  {
    date: "15:00",
  },
  {
    date: "16:00",
  },
  {
    date: "17:00",
  },
  {
    date: "18:00",
  },
  {
    date: "19:00",
  },
  {
    date: "20:00",
  },
  {
    date: "21:00",
  },
  {
    date: "22:00",
  },
]);
let tableDatas = reactive([
  {
    jq: "",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jl: "--",
    ldfr: "--",
  },
]);

let years = ref("");
let months = ref("");
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;
  years.value = `${year}`;
  months.value = `${month}`;
  return `${year}-${month}-${day} ${hour.value}`;
};

let jqArrCv = ref([]);
let isIndex = ref(0);
let selectValue = ref("");
let dialogVisible1 = ref('')
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getClockLast();
};
const chanse = (row) => {
  if (row) {
    years.value = row.split("-")[0];
    months.value = row.split("-")[1];
    getMonthDates();
  } else {
    datePicker.value = daydata.value;
    getMonthDates();
  }
};
const dialogTableClick = (row) => {
  if (row.date == "07:00") return;

  ClockLasts(row.date);
};
//获取已经上报的数据
const ClockLasts = async (isDate = "") => {
  let strDate = "";
  tableData.value.forEach((item) => {
    strDate += "," + item.date.split(":")[0];
  });
  strDate = strDate.substring(4);

  let res = await http.zfpt.ClockLast({
    // orgId:'22',
    orgId: sessionStorage.getItem("orgIds"),
    date: daydata.value,
    hour: isDate ? isDate.split(":")[0] : strDate,
    async: "",
  });
  if (res.code == 0) {
    clockList.value = res.data;

    if (clockList.value.length) {
      if (isDate) {
        let arr = props.jqArr.map((item) => {
          return {
            name: item.name,
            syfr: "--",
            tpfr: "--",
            zcfr: "--",
            zyfr: "--",
            jbfr: "--",
            cjxd: "--",
            jnzy: "--",
            jrxm: "--",
            jwzx: "--",
            jwzy: "--",
            ljtq: "--",
            jl: "--",
            ldfr: "--",
            orgId: item.id,
          };
        }).filter((item) => item.name.includes("监区"))
        tableDatas = reactive(arr);
        dialogVisible1.value = true;
      }
      clockList.value.forEach((item)=>{
                //当前点的数据
                if (
          Number(item.hour.split(":")[0]) ==
          (isDate ? Number(isDate.split(":")[0]) : hour.value)
        ) {
          if (isDate) {
            hour.value = isDate.split(":")[0];
          }

          tableDatas.forEach((iot) => {
            if (iot.name == item.orgName) {
              for (let key in iot) {
                if (item[key]) {
                  iot[key] = item[key];
                }
              }
            }
          });
        }
      })


      console.log(tableDatas,'tableDatastableDatas');
      
    }
  }
};
//中间数据
let jqLists = ref([]);
const getPropName = (index, item) => {
  const keys = Object.keys(jqLists.value[index]);
  // console.log(jqLists.value, ";;;;;", index, item);

  return keys.join(""); // 返回第二个属性名
};

let clockList = ref([]);
const getClockLast = async () => {
  let strDate = "";
  tableData.value.forEach((item) => {
    strDate += "," + item.date.split(":")[0];
  });
  strDate = strDate.substring(4);

  let res = await http.zfpt.ClockLast({
    orgId: sessionStorage.getItem("orgIds"),
    date: value3.value,
    hour: strDate,
    async: "",
  });
  if (res && res.code == 0) {
    clockList.value = res.data;
    tableData.value.forEach((item) => {
      for (let key in item) {
        if (key != "date") {
          item[key] = "--";
        }
      }
    });
    if (res.data.length) {
      clockList.value.forEach((item) => {
        tableData.value.forEach((itz) => {
          if (
            Number(itz.date.split(":")[0]) == Number(item.hour.split(":")[0])
          ) {
            props.jqArr.forEach((icz) => {
              if(icz.name.includes("监区")){

                if (icz.id == item.orgId) {
                  let keyArr = Object.keys(itz);
                  keyArr.forEach((keys) => {
                    if (keys == icz.name) {
                      if (item.async == 2) {
                        itz[keys] = "自动";
                      } else {
                        itz[keys] = "手动";
                      }
                    }
                  });
                }
              }

            });
          }
        });
      });
    
    

    }
  }
};

const itemClick = (index, item) => {
  dateArr.value.forEach((item) => {
    item.is = false;
  });

  value3.value = item.date;
  getClockLast();
  dateArr.value[index].is = true;
};
let dateArr = ref([]);

const getMonthDates = () => {
  const now = new Date();
  const year = Number(years.value);
  const month = Number(months.value); // 注意：月份从0开始，所以11表示12月
  // 获取当前月的天数
  const daysInMonth = new Date(year, month, 0).getDate();
  // 生成日期数组
  const dates = [];
  for (let day = 1; day <= daysInMonth; day++) {
    const dateString = `${year}-${String(month).padStart(2, "0")}-${String(
      day
    ).padStart(2, "0")}`;
    dates.push({
      date: dateString,
      is: false,
    });
  }

  dateArr.value = dates;
  dateArr.value.forEach((item) => {
    if (item.date == daydata.value) {
      item.is = true;
    }
  });
};
const writecope = (scope, label) => {
  // console.log(scope, "sxsxsxszzzz");

  if (scope[label] == "手动") {
    return "手动";
  } else if (scope[label] == "自动") {
    return "自动";
  } else {
    return "--";
  }
};

watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      jqLists.value = props.jqArr.map((item) => item.name).filter((item) => item.includes("监区"));
      console.log(  jqLists.value,'  jqLists.value');
      jqLists.value = jqLists.value.reduce((acc, item) => {
        acc[item] = "--";
        return acc;
      }, {});
    
      tableData.value = tableData.value.map((obj) => ({
        ...obj,
        ...jqLists.value,
      }));
      jqLists.value = Object.entries(jqLists.value).map(([key, value]) => ({
        [key]: value,
      }));


      
      getFormattedDateTime();
      datePicker.value = daydata.value;
      if (props.jqArr) {
        getMonthDates();
        value3.value = daydata.value;
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr)).filter((item) => item.name.includes("监区"))

        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq[0];
        // jqArrCv.value.unshift(allObj);
        getClockLast();
      }
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">

::v-deep .date_searchbox {
  .el-input__wrapper {
    background-color: rgba(15, 82, 163, 0.278);
    box-shadow: (0 0 0 1px rgba(15, 82, 163, 0.61)) inset;
  }
  .el-input__inner {
    color: white;
  }
  .el-input__prefix {
    color: white;
  }
}

.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}
.drawer_box {
  width: 100%;
  display: flex;
  padding: 0 20px;
  height: 100%;
  box-sizing: border-box;
}

::v-deep .isTable .el-table {
  background-color: rgb(8, 32, 78) !important;
  .el-table tr {
    background-color: rgb(8, 32, 78) !important;
  }
  .cell {
    height: 30px;
    color: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    background: rgb(8, 32, 78) !important;
    font-size: 12px;
    line-height: 30px;
  }
  .el-table__cell {
    border-color: 1px solid rgb(5, 112, 146);
    padding: 2px 0px !important;
    background: rgb(8, 32, 78) !important;
  }
  .el-table--fit .el-table__inner-wrapper:before {
    display: none !important;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  --el-table-border-color: rgb(5, 112, 146);
}
</style>
